<template>
    <div class="setFormComponent" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
         <div class="navHead">
            <div class="left">
                <a href="javascript:;" @click="back">
                    <i class="el-icon-back"></i>
                    <span>返回</span>
                </a>
                <a href="javascript:;" class="on">
                    <i class="el-icon-s-open"></i>
                    <span>表单设置</span>
                </a>
            </div>
            <div class="right">
                <a href="javascript:;" @click="gotoSet">
                  <i class="el-icon-setting"></i>
                  <span>页面设置</span>
                </a>
                <a href="javascript:;" class="release" :style="loading?'pointer-events: none;':''" @click="saveHandle">
                    <span>保存设置</span>
                </a>
            </div>
        </div>
        <div class="body" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">

            <div class="left">
                <DecorateFormLeft ref="left" :pageContent="pageContent"></DecorateFormLeft>
            </div>

            <div class="mainWrapper">
              <div class="main" v-if="nowType==='add'||(nowType==='edit'&&pageId&&pageContent)">
                  <div class="head" v-if="headControl" :class="headControl.active" @click="chooseHeadControl">
                      <img :src="head_black" alt="" />
                      <img :src="head_black_r" alt="" class="head_black_r" />
                      <p class="title">{{headControl.title}}</p>
                  </div>
                  <div class="section">
                      <DecorateFormMain ref="main"></DecorateFormMain>
                  </div>
              </div>
            </div>


            <div class="right" v-if="nowType==='add'||(nowType==='edit'&&pageId&&pageContent)">
                <div class="head">
                    <img v-if="control && control.icon" :src="control.icon" alt="" />
                    <span>{{ control&&control.name?control.name:'自定义表单' }}</span>
                </div>
                <div class="article">
                    <DecorateFormRight ref="right" :controlData="control"></DecorateFormRight>
                </div>
            </div>



        </div>




    </div>
</template>
<script>
import dantuzu from "@/static/images/formIcon/dantuzu.svg";
import biaotilan_form from "@/static/images/formIcon/biaotilan_form.svg";
import fuwenben from "@/static/images/formIcon/fuwenben.svg";
import xialaxuanze from "@/static/images/formIcon/xialaxuanze.svg";
import radio from "@/static/images/formIcon/radio.svg";
import checked from "@/static/images/formIcon/checked.svg";
import city from "@/static/images/formIcon/city.svg";
import telephone from "@/static/images/formIcon/telephone.svg";
import username from "@/static/images/formIcon/username.svg";
import date from "@/static/images/formIcon/date.svg";
import daterange from "@/static/images/formIcon/daterange.svg";
import time from "@/static/images/formIcon/time.svg";
import timerange from "@/static/images/formIcon/timerange.svg";
import datetime from "@/static/images/formIcon/datetime.svg";
import datetimerange from "@/static/images/formIcon/datetimerange.svg";
import menuSkeleton from "@/static/images/menu-skeleton.png";
import head_black from "@/static/images/head_black.png";
import head_black_r from "@/static/images/head_black_r.png";
import menu_img from "@/static/images/menu_img.png";
import menu_img_active from "@/static/images/menu_img_active.png";
import { getToken } from "@/utils/auth";
import DecorateFormLeft from "./left/Index.vue";
import DecorateFormRight from "./right/Index.vue";
import DecorateFormMain from "./main/Index.vue";
import headApi from '@/utils/hade';
import Bus from "@/utils/bus";
export default {
    name: "setFormComponent",
    data() {
        return {
            menuSkeleton,head_black,head_black_r,menu_img,menu_img_active,
            dantuzu,biaotilan_form,fuwenben,xialaxuanze,radio,checked,city,telephone,username,date,daterange,time,timerange,datetime,datetimerange,
            control: null,
            loading: false,
            nowType: "add",
            pageId: null,
            pageType: 4, //0 自定义页面 1 个性化页面 2 固定页面 3 登录页面  4 自定义表单  5  底部导航按钮  6 固定主题色  7 登录主题
            pageContent: null,
            headControl: null,
        };
    },
    created() {},
    props: [],
    components: { DecorateFormLeft, DecorateFormRight, DecorateFormMain },
    mounted() {
        // window.onbeforeunload = (e) => {
        //     e = e || window.event;
        //     // 兼容IE8和Firefox 4之前的版本
        //     if (e) {
        //         e.returnValue = "关闭提示";
        //     }
        //     // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        //     return "关闭提示";
        // };

        this.$nextTick(() => {
            // this.getFormModuleList(() => {
                // this.init();
            // });
        });
    },
    methods: {
        init() {
            if (localStorage.getItem("decorateFormModuleId")) {
                this.nowType = "edit";
                this.pageId = localStorage.getItem("decorateFormModuleId");
                // console.log("pageId", this.pageId);
                if (this.pageId) {
                    this.getComponentList();
                }
            } else {
                this.nowType = "add";
                this.setPageContent({
                    id: "",
                    pageType: 4,
                    pageContent: "",
                });
            }
        },
        //查询组件列表
        getComponentList() {
            // console.log("in getComponentList");
            if (!this.pageId) {
                return false;
            }
            if (getToken()) {
                this.axios
                    .get(`${headApi}/appPageContent/${this.pageId}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        //console.log(1,res);
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data) {
                                    this.setPageContent(data);
                                } else {
                                    console.log("no data: ", res);
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(1, err);
                    });
            }
        },
        //编辑时，回写数据
        setPageContent(data) {
            this.pageId = data.id;
            //若存在底部菜单，先将列表装入
            if (
                data.pageType === 4 &&
                this.bottomButtonList &&
                this.bottomButtonList.length > 0
            ) {
                //把组件数据还原为对象
                let pageContent = JSON.parse(data.pageContent);
                //从组件列表中取出顶部组件对象数据
                let topControls = pageContent[0];
                //找到底部菜单组件配置项
                let bottomMenu = topControls.right[0].catalog[2].options;
                //遍历已保存过的所有底部菜单
                this.bottomButtonList.forEach((bbl) => {
                    //若不存在于当前页面底部菜单组件的可选列表中
                    if (!bottomMenu.some((bm) => bm.id == bbl.id)) {
                        //则，追加到可选列表中
                        bottomMenu.push({
                            id: bbl.id,
                            name: bbl.pageName,
                            value: "",
                        });
                    }
                });
                //若存在底部菜单列表
                if (bottomMenu && bottomMenu.length > 0) {
                    //反向装回对象集中
                    topControls.right[0].catalog[2].options = JSON.parse(
                        JSON.stringify(bottomMenu)
                    );
                    pageContent[0] = JSON.parse(JSON.stringify(topControls));
                }
                //还原回字符串类型，便于传输
                this.pageContent = JSON.stringify(pageContent);
            } else {
                this.pageContent = data.pageContent;
            }

            // this.$nextTick(() => {
            //   this.$refs.decorateHead.pageId = data.id;
            //   this.$refs.decorateHead.pageKey = data.pageKey;
            //   this.$refs.decorateHead.pageType = data.pageType;
            // });
        },
        //获取页面底部菜单列表数据
        getFormModuleList(cb) {
            this.loading = true;
            this.bottomButtonList = [];
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        { "pageType": 0, "pageKey": "bottomMenu" },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    this.bottomButtonList = [];
                                    data = data.filter(
                                        (row) => row.pageKey === "bottomMenu"
                                    );
                                    this.bottomButtonList = data;
                                    //此处缓存下来，是用于在配置自定义页面时，选择了显示底部菜单，根据选中的相应底部菜单，显示出具体该菜单的样式渲染好的菜单组件。
                                    localStorage.setItem(
                                        "bottomButtonList",
                                        JSON.stringify(data)
                                    );
                                }
                                if (cb) {
                                    cb();
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                                if (cb) {
                                    cb();
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                            if (cb) {
                                cb();
                            }
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                        if (cb) {
                            cb();
                        }
                    });
            }
        },
        back(){},
        saveHandle(){},
        //页面设置
        gotoSet() {
          this.$router.push({ name: "decorateSet" });
        },
        chooseHeadControl(){
          if(localStorage.getItem("setFormContent")) {
            let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
            if(setFormContent && setFormContent.length>0) {
              setFormContent.forEach(item=>{
                item.active=""
              })
              localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
              Bus.$emit("updateMain")

            }
          }
          this.headControl.active = "on";
          Bus.$emit("updateRight")
        }
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang="scss">
.setFormComponent {
    background-color: #f4f6f8;
    width: 100%;
    min-width: 1100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .navHead {
        width: 100%;
        height: 60px;
        background-color: #333;
        justify-content: space-between;
        display: flex;
        align-items: center;

        .left,
        .right {
            display: flex;
            height: 100%;
            align-items: center;
        }

        a {
            height: 100%;
            display: flex;
            padding: 0 15px;
            font-size: 14px;
            color: #fff;
            align-items: center;

            &:hover,
            &.on {
                background-color: #000;
            }

            i {
                margin-right: 2px;
            }

            &.release {
                min-width: 80px;
                margin-left:15px;
                height: 32px;
                background-color: #5d60f6;
                border-radius: 2px;
                display: flex;
                align-items: center;
                margin-right: 10px;
            }
        }
    }
    .body {
        width: 100%;
        min-width: 1250px;
        height: calc(100% - 60px);
        position: relative;
        display: flex;

        .left{width:300px;  height:100%;background-color: #fff; position: absolute;left:0;}
        .mainWrapper{width:460px; margin: 0 auto;
          overflow-y: auto;
          overflow-x: hidden;
          &::-webkit-scrollbar{
            display: none;
          }
        }
        .main {
            background-color: #fff;
            width: 375px;
            margin: 0 auto;
            height: 667px;
            display: flex;
            flex-direction: column;
            height: fit-content;
            flex-shrink: 0;
            margin: 40px auto 20px;
            border-radius: 2px;
            box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
            position: relative;
            z-index: 1;

            .head {
                width: 100%;
                height: 64px;
                position: relative;
                cursor: pointer;
                &.on{
                  outline: 1px solid #0079fe;
                }
                .head_black_r {
                    position: absolute;
                    right: 7px;
                    width: 87px;
                    height: 32px;
                    bottom: 6px;
                }

                .title {
                    position: absolute;
                    z-index: 100;
                    font-family: "PingFang SC";
                    font-style: normal;
                    font-weight: 600;
                    font-size: 18px;
                    line-height: 25px;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    color: #212121;
                    left: 50%;
                    transform: translate(-50%, 0);
                    bottom: 10px;
                }
            }

            .section {
                width: 100%;
                min-height: 617px;
                /*overflow: hidden;*/
                position: relative;
            }

        }

        .right {
            width: 400px;
            position: absolute;
            right: 0;
            background-color: #fff;
            top: 0;
            z-index: 2;
            height: 100%;
            .head {
                height: 50px;
                width: 100%;
                border-bottom: 1px solid #e8eaec;
                box-sizing: border-box;
                padding-left: 15px;
                display: flex;
                align-items: center;
                &>img {
                    opacity: 0.8;
                    /*font-size: 18px;
                    color: #5d60f6;*/
                    margin-right: 5px;
                    width:24px;height: 24px;
                }
                span {
                    font-size: 16px;
                }
            }
            .article {
                height: calc(100% - 50px);
                overflow-y: auto;
                padding-right: 10px;
                padding-top: 20px;
                box-sizing: border-box;
            }
        }
    }



}
</style>
